<template>
  <div style="display: flex; justify-content: center; align-items: center;height: 100px">
    <el-button type="success" :icon="Check" @click="goOrder" style="margin: 0 auto;">去结算</el-button>
  </div>
  <div >
  <el-card v-for="(item, index) in productList" :key="index">
    <el-row>
      <el-col :span="4">
        <el-image :src="item.picUrl" style="height: 130px;width: 100%"/>
      </el-col>
      <el-col :span="17">
        <div>
          <el-descriptions style="padding-top: 10px" :title=item.productName>
            <el-descriptions-item label="价格:">￥&nbsp;{{item.price}}&nbsp;元</el-descriptions-item>
            <el-descriptions-item label="品牌:">{{item.brandName}}</el-descriptions-item>
            <el-descriptions-item label="保质期:">{{item.shelfLife}}天</el-descriptions-item>
            <el-descriptions-item label="库存余额:">{{item.productCount}}</el-descriptions-item>
            <el-descriptions-item label="添加日期:">{{item.productionDate}}</el-descriptions-item>
            <el-descriptions-item label="总价:">￥&nbsp;{{(item.price*item.quantity).toFixed(2)}}&nbsp;元</el-descriptions-item>
          </el-descriptions>
          数量: <el-input-number size="small"  v-model="item.quantity" :min="1" :max="item.productCount" /><br>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="padding-top: 60px">
          <el-button type="danger" :icon="Delete" @click="DeleteCart(item.cardId)" circle /><br>
        </div>
      </el-col>
    </el-row>
  </el-card>
  </div>
  <el-dialog   v-model="PayIsShowDialog" title="Warning" width="30%" align-center draggable destroy-on-close>
    <template #header>
      <h1>支付页面(此处为模拟支付)</h1>
    </template>
    <el-form-item label-width="100px"   label="支付方式:" size="default">
      <el-select style="width: 100%" v-model="Payway" placeholder="请选择您的支付方式" clearable>
        <el-option label="现金" value="1"></el-option>
        <el-option label="余额" value="2"></el-option>
        <el-option label="网银" value="3"></el-option>
        <el-option label="支付宝" value="4"></el-option>
        <el-option label="微信" value="5"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label-width="100px"  label="收货人:" size="default">
      <el-input v-model="shippingUser" placeholder="请输入收货人姓名" clearable></el-input>
    </el-form-item>
    <el-form-item label-width="100px"  label="电话:" size="default">
      <el-input v-model="phone" placeholder="请输入收货人电话" clearable></el-input>
    </el-form-item>
    <el-form-item label-width="100px"   label="地址:" size="default">
      <el-select style="width: 100%" v-model="Adress" placeholder="请选择您的收货地址" clearable>
        <el-option
            v-for="item in userAdressList"
            :key="item.province+item.city+item.district+item.address+item.zip"
            :label="item.province+item.city+item.district+item.address+item.zip"
            :value="item.province+item.city+item.district+item.address+item.zip"
        />
      </el-select>
    </el-form-item>
    <el-form-item label-width="100px"   label="支付金额:" size="default">
     <span>￥ {{totalPrice.toFixed(2)}} 元</span>
    </el-form-item>
    <template #footer>
      <span>
        <el-button color="green" type="primary" @click="Paysubmit">确认支付</el-button>
        <el-button @click="Payclose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="Cart">
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {Delete,Check} from '@element-plus/icons-vue'
import {reqCartList, reqDelateCart} from "@/api/cart";
import useUserStore from "@/store/modules/user";
import {ResponseData} from "@/api/user/type";
import {reqProductInfo, reqUpdateproductCountProduct} from "@/api/product";
import {reqUserAdressList} from "@/api/adress";
import {reqAddOrder} from "@/api/order";
let UserStore = useUserStore();
const totalPrice = ref(0);
const cartList =ref([]);
const productList =ref([]);
const init = (async ()=>{
  cartList.value = [];
  productList.value = [];
  var res : ResponseData = await reqCartList({userId:UserStore.id});
  cartList.value = res.data;
  for (const item of cartList.value) {
    let res1: ResponseData  = await reqProductInfo(item.productId);
    res1.data.cardId = item.id;
    res1.data.quantity = item.quantity;
    res1.data.createTime = item.createTime;
    productList.value = productList.value.concat(res1.data);
  }
})
const DeleteCart =( async (item : any)=>{
  var res  =await  reqDelateCart({id:item});
  if(res.code == 0){
    init();
  }else {
    ElMessage.info(res.message);
  }
})
const PayIsShowDialog = ref(false);
const Payway = ref("1");
const shippingUser = ref("");
const phone = ref("");
const Adress = ref("");
const PayList = ref([]);
const Payclose = () => {
  PayIsShowDialog.value = false;
}
const Paysubmit = ( async () =>{
  if(!(totalPrice.value > 0)){
    ElMessage.success("您的购物车还没有添加任何商品");
    PayIsShowDialog.value = false;
    return
  }
  for (const item of productList.value) {
    let payTable = {
      userId: UserStore.id,
      productId:item.id,
      price:item.price,
      quantity: Number(item.quantity),
      totalPrice: Number(item.quantity*item.price),
      address:Adress.value,
      merchantId:item.merchantId,
      paymentMethod:Number(Payway.value),
      shippingUser:shippingUser.value,
      orderStatus : 1,
      phone : phone.value
    }
    var res1 = await reqAddOrder(payTable);
    var res2 = await reqUpdateproductCountProduct({id:item.id,productCount:item.productCount-item.quantity});
    var res3  =await  reqDelateCart({id:item.cardId});
  }
  init();
  ElMessage.success("支付成功");
  PayIsShowDialog.value = false;
})
const userAdressList =ref([]);
const goOrder = ( async ()=>{
  totalPrice.value = 0 ;
  Payway.value = "";
  shippingUser.value = "";
  phone.value = "";
  Adress.value = "";
  let userAddress: ResponseData = await reqUserAdressList({id :UserStore.id})
  if(userAddress.data.records){
    userAdressList.value = userAddress.data.records;
  }else{
    ElMessage.error("地址请求数据为空...");
  }
  for (const item of productList.value) {
    totalPrice.value += (item.quantity*item.price);
  }
  PayIsShowDialog.value = true;
})
onMounted(() => {
  init();
})
</script>


<style scoped lang="scss">

</style>